<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 响应式布局代码 -->
		<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"/>
		<title>作业一</title>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="UTF-8"></script>
		<!-- 加载bootstrap  css样式 -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- 加载bootstrap  js脚本 -->
		<script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
		<link rel="stylesheet" href="css/font-awesome.min.css" />
	</head>
	<body>
		<!-- 导航栏 -->
		<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		  <a class="navbar-brand" href="#">Bootstrap响应式布局</a>
		  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
		    <span class="navbar-toggler-icon"></span>
		  </button>
		  <div class="collapse navbar-collapse" id="navbarNav">
		    <ul class="navbar-nav">
		      <li class="nav-item active">
		        <a class="nav-link" href="#">成功案例 <span class="sr-only">(current)</span></a>
		      </li>
		      <li class="nav-item">
		        <a class="nav-link" href="#">招商加盟</a>
		      </li>
		      <li class="nav-item">
		        <a class="nav-link" href="#">联系我们</a>
		      </li>
		    </ul>
		  </div>
		</nav>
		<!-- 轮播图 -->
		<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
			    <li data-target="#carouselExampleControls" data-slide-to="0" class="active"></li>
			    <li data-target="#carouselExampleControls" data-slide-to="1"></li>
			    <li data-target="#carouselExampleControls" data-slide-to="2"></li>
				<li data-target="#carouselExampleControls" data-slide-to="3"></li>
			  </ol>
		  <div class="carousel-inner">
		    <div class="carousel-item active">
		      <img src="images/banner-01.jpg" class="d-block w-100" alt="..." style="height: 400px;">
		    </div>
		    <div class="carousel-item">
		      <img src="images/banner-02.jpg" class="d-block w-100" alt="..." style="height: 400px;">
		    </div>
		    <div class="carousel-item">
		      <img src="images/banner-03.jpg" class="d-block w-100" alt="..." style="height: 400px;">
		    </div>
			<div class="carousel-item">
			  <img src="images/banner-04.jpg" class="d-block w-100" alt="..." style="height: 400px;">
			</div>
		  </div>
		 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
		    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
		    <span class="sr-only">Previous</span>
		  </button>
		  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
		    <span class="carousel-control-next-icon" aria-hidden="true"></span>
		    <span class="sr-only">Next</span>
		  </button>
		</div>
		<!-- 栅格 -->
		<div class="container-fluid col-11">
			<div class="row col-12">
				<div class="p-3 col-3">
					<div class=" p-0" style="border: 1px solid lightgrey;">
						<div class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">智能社区</div>
						<img src="images/1001.PNG" class="d-block w-100 h-40" alt="...">
						<p>主要功能包括：智能家居、智能手环、智能健康称、 生活缴费、绿地理财、物业报修报检、 小区居民生活圈等</p>
						<img src="images/code.png" class="d-block col-12" alt="...">
						<button class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">下载</button>
					</div>
				</div>
				<div class="p-3 col-3">
					<div class="p-0" style="border: 1px solid lightgrey;">
						<div class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">智能社区</div>
						<img src="images/1002.jpg" class="d-block w-100 h-40" alt="...">
						<p>主要功能包括：智能家居、智能手环、智能健康称、 生活缴费、绿地理财、物业报修报检、 小区居民生活圈等</p>
						<img src="images/code.png" class="d-block col-12" alt="...">
						<button class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">下载</button>
					</div>
				</div>
				<div class="p-3 col-3">
					<div class="p-0" style="border: 1px solid lightgrey;">
						<div class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">智能社区</div>
						<img src="images/1003.jpg" class="d-block w-100 h-40" alt="...">
						<p>主要功能包括：智能家居、智能手环、智能健康称、 生活缴费、绿地理财、物业报修报检、 小区居民生活圈等</p>
						<img src="images/code.png" class="d-block col-12" alt="...">
						<button class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">下载</button>
					</div>
				</div>
				<div class="p-3 col-3">
					<div class="p-0" style="border: 1px solid lightgrey;">
						<div class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">智能社区</div>
						<img src="images/1004.jpg" class="d-block w-100 h-40" alt="...">
						<p>主要功能包括：智能家居、智能手环、智能健康称、 生活缴费、绿地理财、物业报修报检、 小区居民生活圈等</p>
						<img src="images/code.png" class="d-block col-12" alt="...">
						<button class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">下载</button>
					</div>
				</div>
				<div class="p-3 col-3">
					<div class="p-0" style="border: 1px solid lightgrey;">
						<div class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">智能社区</div>
						<img src="images/1005.jpg" class="d-block w-100 h-40" alt="...">
						<p>主要功能包括：智能家居、智能手环、智能健康称、 生活缴费、绿地理财、物业报修报检、 小区居民生活圈等</p>
						<img src="images/code.png" class="d-block col-12" alt="...">
						<button class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">下载</button>
					</div>
				</div>
				<div class="p-3 col-3">
					<div class="p-0" style="border: 1px solid lightgrey;">
						<div class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">智能社区</div>
						<img src="images/1006.jpg" class="d-block w-100 h-40" alt="...">
						<p>主要功能包括：智能家居、智能手环、智能健康称、 生活缴费、绿地理财、物业报修报检、 小区居民生活圈等</p>
						<img src="images/code.png" class="d-block col-12" alt="...">
						<button class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">下载</button>
					</div>
				</div>
				<div class="p-3 col-3">
					<div class="p-0" style="border: 1px solid lightgrey;">
						<div class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">智能社区</div>
						<img src="images/1007.jpg" class="d-block w-100 h-40" alt="...">
						<p>主要功能包括：智能家居、智能手环、智能健康称、 生活缴费、绿地理财、物业报修报检、 小区居民生活圈等</p>
						<img src="images/code.png" class="d-block col-12" alt="...">
						<button class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">下载</button>
					</div>
				</div>
				<div class="p-3 col-3">
					<div class="p-0" style="border: 1px solid lightgrey;">
						<div class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">智能社区</div>
						<img src="images/1008.jpg" class="d-block w-100 h-40" alt="...">
						<p>主要功能包括：智能家居、智能手环、智能健康称、 生活缴费、绿地理财、物业报修报检、 小区居民生活圈等</p>
						<img src="images/code.png" class="d-block col-12" alt="...">
						<button class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">下载</button>
					</div>
				</div>
				<div class="p-3 col-3">
					<div class="p-0" style="border: 1px solid lightgrey;">
						<div class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">智能社区</div>
						<img src="images/1009.jpg" class="d-block w-100 h-40" alt="...">
						<p>主要功能包括：智能家居、智能手环、智能健康称、 生活缴费、绿地理财、物业报修报检、 小区居民生活圈等</p>
						<img src="images/code.png" class="d-block col-12" alt="...">
						<button class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">下载</button>
					</div>
				</div>
				<div class="p-3 col-3">
					<div class="p-0" style="border: 1px solid lightgrey;">
						<div class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">智能社区</div>
						<img src="images/1010.jpg" class="d-block w-100 h-40" alt="...">
						<p>主要功能包括：智能家居、智能手环、智能健康称、 生活缴费、绿地理财、物业报修报检、 小区居民生活圈等</p>
						<img src="images/code.png" class="d-block col-12" alt="...">
						<button class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">下载</button>
					</div>
				</div>
				<div class="p-3 col-3">
					<div class="p-0" style="border: 1px solid lightgrey;">
						<div class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">智能社区</div>
						<img src="images/1011.jpg" class="d-block w-100 h-40" alt="...">
						<p>主要功能包括：智能家居、智能手环、智能健康称、 生活缴费、绿地理财、物业报修报检、 小区居民生活圈等</p>
						<img src="images/code.png" class="d-block col-12" alt="...">
						<button class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">下载</button>
					</div>
				</div>
				<div class="p-3 col-3">
					<div class="p-0" style="border: 1px solid lightgrey;">
						<div class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">智能社区</div>
						<img src="images/1012.jpg" class="d-block w-100 h-40" alt="...">
						<p>主要功能包括：智能家居、智能手环、智能健康称、 生活缴费、绿地理财、物业报修报检、 小区居民生活圈等</p>
						<img src="images/code.png" class="d-block col-12" alt="...">
						<button class="col-12 text-center bg-light" style="border: 1px solid lightgrey;">下载</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
